{% extends 'layout/manage.html' %}
{% load static %}
{% block content %}
    <div class="wrapper">
        <div class="product-img" style="background: url({% static good.image %}); background-size: cover; background-position: center center;" >
        </div>
        <div class="product-info">
            <div class="product-text">
                <h1>{{ good.name }}</h1>
                <div class="divider">
                    <hr class="simple" color="#6f5499" />
                </div>
                <li>商品介绍:{{ good.desc }}</li>
                <li>商品销售量:{{ good.buy }}</li>
                <li>商品库存量:{{ good.stock }}</li>
                <li>商品收藏量:{{ good.stars }}</li>
                <li>商品浏览量:{{ good.views }}</li>
                <div style="display: flex;justify-content: center">
                    <a class="btn btn-primary" data-toggle="modal" data-target="#modifyModal" style=" margin: 15px;">修 改</a>
                    <a class="btn btn-danger" data-toggle="modal" data-target="#delModal" style="margin: 15px">删 除</a>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="delModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
        <div class="modal-dialog modal-sm" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h4 class="modal-title" id="myModalLabel">提示</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <h4 class="modal-title" id="myModalLabel">确定要删除当前项目吗？</h4>
                </div>
                <div class="modal-body" style="text-align: center">
                    <button type="button" class="btn btn-default" data-dismiss="modal" style="margin-right: 10px">取 消</button>
                    <button id="btnDel" type="button" class="btn btn-danger" style="margin-left: 10px">确 定</button>
                </div>
            </div>
        </div>
    </div>

    <div class="modal fade" id="modifyModal" tabindex="-1" role="dialog" aria-labelledby="myModifyLabel">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span
                            aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title" id="myModifyLabel">修改商品</h4>
                </div>
                <div class="modal-body">
                    <form id="modifyForm">
                        {% for field in form %}
                            <div class="form-group">
                                <label for="{{ field.id_for_label }}">{{ field.label }}</label>
                                {{ field }}
                            </div>
                        {% endfor %}
                    </form>
                </div>
                <div class="modal-body">
                    <button type="button" class="btn btn-default" data-dismiss="modal">取 消</button>
                    <button id="btnModify" type="button" class="btn btn-primary">确 定</button>
                </div>
            </div>
        </div>
    </div>
{% endblock %}

{% block css %}
<style>
        .wrapper {
            height: 420px;
            width: 800px;
            margin: 100px auto;
            border-radius: 7px 7px 7px 7px;
            -webkit-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
            -moz-box-shadow: 0px 14px 32px 0px rgba(0, 0, 0, 0.15);
            box-shadow: 0 0 5px rgba(0, 0, 0, 0.2) !important;
        }
        .wrapper:hover{
            box-shadow: 0 0 25px rgba(0, 0, 0, 0.4) !important;
        }

        .product-img {
            float: left;
            height: 420px;
            width: 550px;
        }

        .product-img img {
            border-radius: 7px 0 0 7px;
        }

        .product-info {
            float: left;
            height: 420px;
            width: 250px;
            border-radius: 0 7px 10px 7px;
            background-color: #ffffff;
        }

        .product-text {
            height: 300px;
            width: 250px;
        }

        .product-text h1 {
            margin: 0 0 0 20px;
            padding-top: 52px;
            font-size: 40px;
            color: #474747;
        }

        .product-text li {
            margin: 0 0 10px 20px;
            font-size: 15px
        }


    </style>
{% endblock %}

{% block js %}
    <script>
        $(function () {
            bindDel();
            bindModify();
        });

        /*
            创建商品提交
         */
        function bindDel() {
            $('#btnDel').click(function () {
                var formData = new FormData();
                formData.append('type', 'del');
                $.ajax({
                    url: '{% url 'commodity_modify' good_id=good.Good_ID %}',
                    type: 'POST',
                    data: formData,
                    dataType: 'JSON',
                    enctype: "multipart/form-data",
                    async: true,
                    processData: false,
                    contentType: false,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (res) {
                        if (res.status) {
                            //location.href = location.href
                            //location.reload();
                            location.href = '{% url 'commodity_list' %}';
                        }
                    }
                });
            });
        }

        function bindModify() {
            $('#btnModify').click(function () {
                var formData = new FormData();
                formData.append('type', 'modify');
                formData.append('name', $("#id_name").val());
                formData.append('desc', $("#id_desc").val());
                formData.append('stock', $("#id_stock").val());
                formData.append('gtype', $("#id_type").val());
                formData.append('image', $("input[name='image']")[0].files[0]);
                $.ajax({
                    url: '{% url 'commodity_modify' good_id=good.Good_ID %}',
                    type: 'POST',
                    data: formData,
                    dataType: 'JSON',
                    enctype: "multipart/form-data",
                    async: true,
                    processData: false,
                    contentType: false,
                    beforeSend: function (xhr, settings) {
                        xhr.setRequestHeader("X-CSRFToken", "{{ csrf_token }}");
                    },
                    success: function (res) {
                        if (res.status) {
                            //location.href = location.href
                            location.reload();
                            //location.href = '{% url 'commodity_list' %}';
                        }
                    }
                });
            });
        }
    </script>
{% endblock %}